<template>
	<div class="order-list">
		<div class="card-item" v-for="(order, i) in orderList" :key="i">
			<van-cell class="card-header" :title="`订单ID：${order.id}`" :label="`订单时间：${order.order_time}`">
				<template #default>
					<span>{{orderStatus(order)}}</span>
					<span v-if="order.status!=-1" @click="onClickOrderCancel(order.id)">|取消订单</span>
				</template>
			</van-cell>

			<van-row v-for="item in order.detailList" :key="item.id" @click="onClick2OrderDetail(order.id)">
				<van-col span="6">
					<van-image :src="APIDomainName + item.product_pic"></van-image>
				</van-col>
				<van-col span="18">
					<van-cell :title="item.product_name" :label="item.product_spec" class="van-ellipsis"></van-cell>
					<van-row style="padding-left: 20px;text-align: right;" type="flex" justify="space-between">
						<van-col span="5">{{item.price}}</van-col>
						<van-col span="4">X</van-col>
						<van-col span="5">{{item.count}}</van-col>
						<van-col span="3">=</van-col>
						<van-col span="7">{{item.price*item.count }}</van-col>
					</van-row>
				</van-col>
			</van-row>
			<div class="amount">实付金额：<span style="color:red">¥{{ orderAmount(order) }}</span>
			</div>
		</div>
	</div>
</template>

<script>
	import { getOrderListAPI, cancleOrderByIdAPI } from "@/api/order.js";
	export default {
		data() {
			return {
				orderList: [],
			};
		},
		//生命周期钩子函数
		created() {
			this.getOrderList();
		},

		methods: {
			//获取订单列表 
			getOrderList() {
				getOrderListAPI().then(result => {
					this.orderList = result.data;
				});
			},
			// 触发导航到订单详情（此时该路由功能还没有实现）
			onClick2OrderDetail(id) {
				this.$router.push({
					name: "orderDetail",
					query: {
						id
					}
				});
			},
			// 触发取消订单
			onClickOrderCancel(id) {
				//调用接口
				cancleOrderByIdAPI(id).then(() => {
					this.getOrderList();
				});
			},

			//计算一个订单的总金额
			orderAmount(order) {
				let amount = 0;
				order.detailList.forEach(item => {
					amount += item.count * item.price;
				});
				return amount.toFixed(2);
			},
			//订单状态格式转换
			orderStatus(order) {
				let status = "未知";
				switch (order.status) {
					case 0:
						status = "未支付";
						break;
					case 1:
						status = "已支付";
						break;
					case -1:
						status = "已取消";
						break;
				}
				return status;
			},
		},
	};
</script>

<style lang="less" scoped>
.order-list {
  background: #f8fafc;
  padding: 12px;
}

.card-item {
  margin: 10px 0;
  padding: 16px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  transition: all 0.3s;
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.1);
  }
}

.card-header {
  padding: 8px 0;
  margin-bottom: 12px;
  border-bottom: 2px solid #f1f5f9;
  
  span:first-child {
    font-weight: 600;
    
    &[data-status="已支付"] { color: #10b981; }
    &[data-status="已取消"] { color: #ef4444; }
    &[data-status="未支付"] { color: #f59e0b; }
  }
  
  span:last-child {
    color: #94a3b8;
    cursor: pointer;
    transition: all 0.3s;
    
    &:hover {
      color: #dc2626;
      text-decoration: underline;
    }
  }
}

.van-image {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  overflow: hidden;
  object-fit: cover;
}

.amount {
  margin-top: 12px;
  padding: 12px;
  background: #f1f5f9;
  color: #1e293b;
  border-radius: 8px;
  font-weight: 600;
  
  span {
    color: #ef4444;
    font-size: 18px;
  }
}

.van-cell__title {
  font-size: 15px;
  line-height: 1.4;
}

.van-col {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 14px;
  
  &:nth-child(1),
  &:nth-child(3),
  &:nth-child(5) {
    color: #ef4444;
    font-weight: 500;
  }
}
</style>